<template>
	<el-card>
		<el-row style="display: flex;">
			<el-card style="flex: 1;margin-right: 10px;min-width: 550px;" header="用户信息">
				<div style="display:flex;align-items:center">
					<img :src="userInfo.headUrl" style="width:200px;height:200px;border:#ededed 1px solid" />
					<div style="height: 200px;margin: 0 20px;color: #909399;display: flex;flex-direction: column;justify-content: space-between;">
						<div>
							<div class="left" style="font-size: 18px; color: #606266">
								{{userInfo.nickName}}
							</div>
							<div style="display:flex;margin-top:20px;font-size:15px">
								<div class="left">登陆名称:</div>
								<div style="margin-left:20px">{{userInfo.loginName}}</div>
							</div>
							<div style="display:flex;margin-top:20px;font-size:15px">
								<div class="left">手机号码:</div>
								<div style="margin-left:20px">{{userInfo.phone}}</div>
							</div>
							<div style="display:flex;margin-top:20px;font-size:15px">
								<div class="left">我的角色:</div>
								<div style="margin-left:20px">{{userInfo.roleNames}}</div>
							</div>
						</div>
						<div>
							<el-button type="primary" @click="updateUserInfoShowClick" plain>修改信息</el-button>
							<el-button type="primary" @click="updatePasswordShowClick" plain>修改密码</el-button>
							<el-button type="danger" @click="logoutClick" plain>退出登录</el-button>
						</div>
					</div>
				</div>
			</el-card>
			<el-card class="card-block" style="flex: 1;min-width: 550px;" header="系统介绍">
				<div class="left" style="font-size: 16px; color: #606266;line-height: 30px;">
					一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了格子管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
				</div>
			</el-card>
		</el-row>
		<el-row style="display: flex;margin-top: 10px;">
			<el-card class="card-block" style="flex: 1;min-width: 550px;margin-right: 10px;" header="功能列表">
				<div style="display: flex;flex-wrap: wrap;">
					<div v-for="(item,index) in gongnengList" style="width: 100px;padding: 15px 0;text-align: center;display: flex;justify-content: center;">
						<div style="text-align: center;">
							<div style="height: 60px;width: 60px;display: flex;align-items: center;justify-content: center;width: 60px;height: 60px;border-radius: 8px;border: 1px solid #eee;"
							>
							<el-icon :style="'color:'+item.color" style="font-size: 20px;">
								<component :is="item.icon"></component>
							</el-icon>
							</div>
							<div style="color: #333;font-size: .875rem;font-weight: 400;line-height: 1.5715">{{item.name}}
							</div>
						</div>
					</div>
				</div>
			</el-card>

			<el-card class="card-block" style="flex: 1;min-width: 550px;" header="技术选型">
				<div style="font-size: 13px;font-weight: bold;">后端技术</div>
				<el-tag effect="plain" style="margin:10px 5px;" type=""
					v-for="(item,index) in jishuxuanxingData.houduanList" :key="item">{{item}}</el-tag>
				<div style="font-size: 13px;font-weight: bold;">前端技术</div>
				<el-tag effect="plain" style="margin:10px 5px;" type=""
					v-for="(item,index) in jishuxuanxingData.qianduanList" :key="item">{{item}}</el-tag>
			</el-card>
		</el-row>
		<!-- 修改信息 -->
		<gz-dialog @confirm="updateInfoConfirmClick" width="500px" ref="updateInfoGzDialogRef" title="修改信息">
			<el-form :model="updateInfoCurData" ref="updateInfoCurFormRef" label-width="80px" :show-message="false">
				<el-form-item label="用户头像" prop="headUrl" required>
					<gz-upload v-model="updateInfoCurData.headUrl" rootPath="sys/headimg"></gz-upload>
				</el-form-item>
				<el-form-item label="用户昵称" prop="nickName" required>
					<el-input v-model="updateInfoCurData.nickName" maxlength="30"></el-input>
				</el-form-item>
				<el-form-item label="用户手机" prop="phone" required>
					<el-input v-model="updateInfoCurData.phone" maxlength="11"></el-input>
				</el-form-item>
				<el-form-item label="登录名" prop="loginName" required>
					<el-input v-model="updateInfoCurData.loginName" maxlength="30"></el-input>
				</el-form-item>
			</el-form>
		</gz-dialog>

		<!-- 修改密码 -->
		<gz-dialog @confirm="updatePasswordConfirmClick" width="500px" ref="updatePasswordGzDialogRef" title="修改密码">
				<el-form :model="updatePasswordCurData" ref="updatePasswordCurFormRef" label-width="80px"
					:show-message="false">
					<el-form-item label="旧密码" required prop="oldPassword">
						<el-input v-model="updatePasswordCurData.oldPassword" placeholder="" type="password" clearable
							show-password maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="新密码" required prop="newPassword">
						<el-input v-model="updatePasswordCurData.newPassword" placeholder="" type="password" clearable
							show-password maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" required prop="confirmPassword">
						<el-input v-model="updatePasswordCurData.confirmPassword" placeholder="" type="password"
							clearable show-password maxlength="30"></el-input>
					</el-form-item>
				</el-form>
		</gz-dialog>
	</el-card>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				updateInfoCurData: {
					nickName: "",
					phone: "",
					loginName: "",
					headUrl: "",
				},
				updatePasswordCurData: {
					oldPassword: null,
					newPassword: null,
					confirmPassword: null,
				},
				jishuxuanxingData: {
					houduanList: ['SpringBoot3.4.1', 'Spring Security', 'JWT', 'MyBatis Plus', 'Fastjson'],
					qianduanList: ['Vue3.4.31', 'Element-PLUS', 'Axios', 'ai-editor','vite'],
				},
				gongnengList: [
					{
						icon: "Tools",
						name: "用户管理",
						color:"#409EFF",
					},
					{
						icon: "Tools",
						name: "角色管理",
						color:"#409EFF",
					},{
						icon: "Tools",
						name: "菜单管理",
						color:"#409EFF",
					},
					{
						icon: "Tools",
						name: "资源管理",
						color:"#409EFF",
					},
					{
						icon: "Tools",
						name: "字典管理",
						color:"#409EFF",
					},
					{
						icon: "Tools",
						name: "字典数据",
						color:"#409EFF",
					},
					{
						icon: "Tools",
						name: "操作日志",
						color:"#409EFF",
					},
					{
						icon: "Tools",
						name: "生成代码",
						color:"#F56C6C"
					},
					{
						icon: "Tools",
						name: "模板参考",
						color:"#F56C6C"
					},
					{
						icon: "Tools",
						name: "代码市场",
						color:"#F56C6C"
					},
					{
						icon: "Tools",
						name: "配置管理",
						color:"#67C23A",
					},
					{
						icon: "Tools",
						name: "APP用户",
						color:"#67C23A",
					}
				]
			};
		},
		computed: {
			userInfo: function() {
				return this.$store.sys().userInfo
			}
		},
		methods: {
			logoutClick() {
				this.$api.logout().then(data => {
					localStorage.clear();
					sessionStorage.clear();
					//跳转登录页
					this.$router.replace("/login");
				})
			},
			updateUserInfoShowClick() {
				let userInfo = this.$store.sys().userInfo
				this.updateInfoCurData.nickName = userInfo.nickName
				this.updateInfoCurData.phone = userInfo.phone
				this.updateInfoCurData.loginName = userInfo.loginName
				this.updateInfoCurData.headUrl = userInfo.headUrl

				this.$refs.updateInfoGzDialogRef.open()
			},
			updatePasswordShowClick() {
				this.$refs.updatePasswordGzDialogRef.open()
			},
			updateInfoConfirmClick() {
				this.$refs.updateInfoCurFormRef.validate((valid) => {
					if (valid) {
						this.$api.sysUserEditUserProfile(this.updateInfoCurData).then(data => {
							localStorage.clear();
							sessionStorage.clear();
							this.$refs.updateInfoGzDialogRef.close()
							setTimeout(() => {
								this.$router.replace("/login");
							}, 1500);
						})
					}
				});
			},
			updatePasswordConfirmClick() {
				this.$refs.updatePasswordCurFormRef.validate((valid) => {
					if (valid) {
						if (this.updatePasswordCurData.newPassword == this.updatePasswordCurData.confirmPassword) {
							this.$common.msgBoxWarn("确定修改密码?", async () => {
								await this.$api.sysUserEditPassword(this.updatePasswordCurData);
								localStorage.clear();
								sessionStorage.clear();
								setTimeout(() => {
									this.$router.replace("/login");
								}, 1500);
							}, () => {})
						} else {
							this.$common.msgWarn("新密码不一致")
						}
					}
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
</style>